<template>
  <el-dialog v-model="props.mailVisible" width="450px" destroy-on-close center>
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">{{ dialogTitle }}</h4>
      </div>
    </template>
    <div>
      <el-row :gutter="20">
        <el-col>
          <el-input v-model="form.name" type="text" :disabled="disabledName" />
        </el-col>
      </el-row>
      <el-row :gutter="20" class="code">
        <el-col :span="14">
          <el-input v-model="verificationCode" type="text" />
        </el-col>
        <el-col :span="3">
          <el-button @click="startCountdown" :disabled="isSending || countdown > 0">
            <template v-if="countdown > 0"> {{ countdown }}s </template>
            <template v-else> {{ $t('om.GetCAPTCHA') }} </template>
          </el-button>
        </el-col>
      </el-row>
      <div class="footer">
        <el-button @click="registerAccount">{{ $t('smt.Define') }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onBeforeUnmount } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { getEmailVerificationCode, setVerificationCode } from '../../../server/api/biz';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const props = defineProps({
  mailVisible: {
    type: Boolean,
  },
  type: {
    type: String,
  },
});
const emit = defineEmits(['close', 'open', 'openConfirm']);
const disabledName = ref(true);
const router = useRouter();
const verificationCode = ref('');
const isSending = ref(false);
const countdown = ref(0);
const emailType = ref('1');
const form = reactive({
  name: '',
  title: t('om.OldMailboxVerification'),
});
const dialogTitle = ref(t('om.OldMailboxVerification'));
const changeType = (data) => {
  form.name = data.email;
  disabledName.value = true;
  dialogTitle.value = t('om.OldMailboxVerification');
};

defineExpose({ changeType });

let countdownInterval;
/**
 * 获取验证码
 */
const startCountdown = () => {
  console.log(isSending.value, countdown.value);
  // 模拟发送验证码的异步操作
  if (!isSending.value && countdown.value === 0) {
    isSending.value = true;
    countdown.value = 60;

    countdownInterval = setInterval(() => {
      countdown.value--;
      console.log(isSending.value, countdown.value);
      if (countdown.value === 0) {
        clearInterval(countdownInterval);
        isSending.value = false;
      }
    }, 1000);
  }
  getVerificationCode();
};

onBeforeUnmount(() => {
  clearInterval(countdownInterval);
});
/**
 * 获取邮箱验证码
 */
const getVerificationCode = () => {
  judgeEmailType();
  const obj = {
    email: form.name,
    emailType: emailType.value,
  };
  getEmailVerificationCode(obj).then((res) => {
    if (res.code == 200) {
      ElMessage.success(t('mall.check_email'));
    } else {
      ElMessage.error(res.msg);
    }
  });
};

/**
 * 验证新旧邮箱
 */
const registerAccount = () => {
  judgeEmailType();
  let obj = {
    email: form.name,
    emailType: emailType.value,
    mailVerificationCode: verificationCode.value,
  };

  setVerificationCode(obj).then((res) => {
    if (res.code === 200) {
      if (emailType.value == 1) {
        disabledName.value = false;
        form.name = '';
        dialogTitle.value = t('om.Settingupanew');
        verificationCode.value = '';
        countdown.value = 0;
        isSending.value = false;
        clearInterval(countdownInterval);
      } else {
        emit('close');
        emit('openConfirm');
        countdown.value = 0;
        isSending.value = false;
        clearInterval(countdownInterval);
      }
    } else {
      ElMessage.error(res.msg);
    }
  });
};

/**
 * 判断新旧邮箱类型
 */
const judgeEmailType = () => {
  if (disabledName.value === true) {
    emailType.value = 1;
  } else {
    emailType.value = 2;
  }
};
</script>
<style lang="scss" scoped>
.code {
  margin-top: 12px;
}
.footer {
  width: 100%;
  padding-bottom: 24px;
  padding-top: 24px;
  display: flex;
  justify-content: center;
}
</style>
